/*----------------------------------------------------
 * common control
 *----------------------------------------------------
 */

/** =======================================================
 *  text color control
 *  =======================================================
 */
.jk-text-default {
    color: #000000;
}

.jk-text-info {
    color: dodgerblue;
}

.jk-text-warn {
    color: #ffff00;
}

.jk-text-danger {
    color: red;
}

.jk-text-light {
    color: #a9a9a9;
}

.jk-font-smaller {
    font-size: 80%;
}

.no-display {
    display: none;
}

.display {
    display: block;
}

.ul-horizontal {
    ul li {
        display: inline;
    }
}

.jk-clear {
    clear: both;
}

.red-line {
    border: 1px solid red;
}

.back-gray {
    background-color: gray;
}

.jk-pull-right {
    float: right;
}

.jk-pull-left {
    float: left;
}

/**===============
 * button style
 *================
 */
.jk-btn {
    padding: 8px;
    border-radius: 8px;
    color: #333333;
    border: 0;
    box-shadow: 0 0 6px rgba(10, 10, 10, 0.8);
    background-color: aliceblue;
    &:hover {
        cursor: pointer;
        color: #000000;
        background-color: #ffffff;
    }
}

/** button width control */
@btn-width: 5em;

.jk-btn-large {
    width: @btn-width + 3em;
}
.jk-btn-middle {
    width: @btn-width;
}

.jk-btn-small {
    width: @btn-width - 2em;
}

/**  btn color control */
.jk-btn-warn {
    background-color: #ec9923;
    &:hover {
        background-color: #eccc44;
    }
}

.jk-btn-danger {
    background-color: #eb3328;
    &:hover {
        background-color: #ff443f;
    }
}

.jk-btn-info {
    background-color: #38b3d7;
    &:hover {
        background-color: #49b3ff;
    }
}


/** ==================================
 *  input [type=text] control
 *  info: also can use for other control of input
 *  ==================================
 */
.jk-input-text {
    border-radius: 4px;
    border: 0;
    padding: 6px;
    box-shadow: 0px 0px 8px rgba(10,10,10,0.5);
    &:focus {
        border:0;
        outline: none;  /* the default line around input when focus (remove it) */
        box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, 0.2);
    }
}

input[type=text]:disabled {
    box-shadow: inset 0 0 2px 2px rgba(200,200,200, 0.45);
    background-color: #dcdcdc;
}

/** input color control */
.jk-input-warn {
    &:focus {
        box-shadow: inset 0px 0px 3px 3px rgba(193,203,10, 0.35);
    }
}

.jk-input-danger {
    &:focus {
        box-shadow: inset 0px 0px 3px 3px rgba(255,0,0,.55);
    }
}

.jk-input-info {
    &:focus {
        box-shadow: inset 0px 0px 3px 3px rgba(100, 200,203,.35);
    }
}

/** input width control */
@input-text-height: 3em;
@input-text-width: 5em;

.jk-input-large {
    width: @input-text-width + 20em;
    height: @input-text-height;
}

.jk-input-middle {
    width: @input-text-width + 10em;
    height: @input-text-height;
}

.jk-input-small {
    width: @input-text-width;
    height: @input-text-height;
}

.jk-input-exsmall {
    width: @input-text-width - 3em;
    height: @input-text-height;
}


/* some other control */ 
.text-center {
    text-align: center;
}

.jk-leavetop {
    margin-top: 2%;
}

table td {
    padding: 6px;
}
